<script>
import echarts from "@/utils/echarts";
import {getUserRank} from "@/api/charts";

export default {
  name: 'TopChart',
  data() {
    return {
      option: {
        title: {
          text: '用户默写数量排行（前六名）',
          left: 'center',
          textStyle: {
            color: '#333',
            fontSize: 20,
            fontWeight: 'bold'
          },
          subtextStyle: {
            color: '#999',
            fontSize: 14
          }
        },
        backgroundColor: '#ffffff', // 白色背景
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          axisLabel: {
            color: '#333',
            fontWeight: 'bold'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#eee'
            }
          },
          axisLabel: {
            color: '#333',
            fontWeight: 'bold'
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: '50%',
            data: [],
            itemStyle: {
              borderRadius: [6, 6, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#69eacb'},
                {offset: 1, color: '#eaccf8'}
              ]),
              shadowColor: 'rgba(0, 0, 0, 0.15)',
              shadowBlur: 8
            },
            emphasis: {
              itemStyle: {
                color: '#ffd700'
              }
            },
            animationDuration: 1000,
            animationEasing: 'cubicOut'
          }
        ]
      }
    };
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.main;
      if (!chartDom) return;

      if (this.myChart) {
        this.myChart.dispose();
      }

      this.myChart = echarts.init(chartDom);
      this.myChart.setOption(this.option);
    },

    /**
     * 获取数据
     */
    getRank() {
      getUserRank().then(res => {
        const dataList = res.data.data
        const x = []
        const y = []
        for (let i = 0; i < dataList.length; i++) {
          const data = dataList[i]
          x.push(data.nickName)
          y.push(data.dictationCount)
        }

        //获取最大的值特殊颜色显示
        const maxY = Math.max(...y);
        const styleData = y.map(value => {
          if (maxY === value) {
            return {
              value,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: '#ff6e7f'},
                  {offset: 1, color: '#bfe9ff'}
                ])
              }
            }
          }
          return {value}
        })
        //设置数据
        this.option.xAxis.data = x;
        this.option.series[0].data = styleData

        //初始化图表
        if (this.myChart) {
          this.myChart.setOption(this.option, {
            notMerge: true,
            lazyUpdate: false
          })
        }
      }).catch(err => {})
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
      this.getRank()
    });
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose();
    }
  }
};
</script>

<template>
  <div class="top-chart-wrapper">
    <div class="top" ref="main"></div>
  </div>
</template>

<style scoped>
.top-chart-wrapper {
  background: #fff;
  padding: 1rem;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.top {
  width: 100%;
  height: 500px;
  margin-top: 50px;
}
</style>
